<template>
  <div class="dna-helix-background">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let ctx = null
let animationFrame = null
let rotation = 0

class DNAHelix {
  constructor(canvas, index, total) {
    this.canvas = canvas
    this.centerX = canvas.width / 2 + (index - total / 2) * 200
    this.centerY = canvas.height / 2
    this.radius = 80
    this.height = canvas.height * 1.2
    this.segments = 50
    this.rotation = 0
    this.speed = 0.02
    
    // DNA颜色配对
    this.colors = {
      strand1: { r: 100, g: 200, b: 255 },
      strand2: { r: 255, g: 100, b: 150 },
      connection: { r: 150, g: 255, b: 200 }
    }
  }

  update() {
    this.rotation += this.speed
  }

  draw(ctx) {
    ctx.save()
    ctx.translate(this.centerX, this.centerY)

    const segmentHeight = this.height / this.segments

    for (let i = 0; i < this.segments; i++) {
      const y = -this.height / 2 + i * segmentHeight
      const angle = this.rotation + (i / this.segments) * Math.PI * 4

      // 计算两条螺旋的位置
      const x1 = Math.cos(angle) * this.radius
      const z1 = Math.sin(angle) * this.radius
      const x2 = Math.cos(angle + Math.PI) * this.radius
      const z2 = Math.sin(angle + Math.PI) * this.radius

      // 计算下一个点用于绘制螺旋线
      const nextY = y + segmentHeight
      const nextAngle = this.rotation + ((i + 1) / this.segments) * Math.PI * 4
      const nextX1 = Math.cos(nextAngle) * this.radius
      const nextZ1 = Math.sin(nextAngle) * this.radius
      const nextX2 = Math.cos(nextAngle + Math.PI) * this.radius
      const nextZ2 = Math.sin(nextAngle + Math.PI) * this.radius

      // 深度排序
      const depth1 = z1
      const depth2 = z2

      // 绘制连接线
      if (i % 3 === 0) {
        const avgDepth = (depth1 + depth2) / 2
        const opacity = (avgDepth + this.radius) / (this.radius * 2)
        
        ctx.strokeStyle = `rgba(${this.colors.connection.r}, ${this.colors.connection.g}, ${this.colors.connection.b}, ${opacity * 0.4})`
        ctx.lineWidth = 2
        ctx.beginPath()
        ctx.moveTo(x1, y)
        ctx.lineTo(x2, y)
        ctx.stroke()

        // 绘制连接点
        ctx.fillStyle = `rgba(${this.colors.connection.r}, ${this.colors.connection.g}, ${this.colors.connection.b}, ${opacity * 0.6})`
        ctx.beginPath()
        ctx.arc(x1, y, 4, 0, Math.PI * 2)
        ctx.fill()
        ctx.beginPath()
        ctx.arc(x2, y, 4, 0, Math.PI * 2)
        ctx.fill()
      }

      // 绘制螺旋线1
      if (depth1 > -this.radius * 0.5) {
        const opacity1 = (depth1 + this.radius) / (this.radius * 2)
        ctx.strokeStyle = `rgba(${this.colors.strand1.r}, ${this.colors.strand1.g}, ${this.colors.strand1.b}, ${opacity1})`
        ctx.lineWidth = 3
        ctx.lineCap = 'round'
        ctx.shadowBlur = 10
        ctx.shadowColor = `rgba(${this.colors.strand1.r}, ${this.colors.strand1.g}, ${this.colors.strand1.b}, ${opacity1 * 0.5})`
        
        ctx.beginPath()
        ctx.moveTo(x1, y)
        ctx.lineTo(nextX1, nextY)
        ctx.stroke()
      }

      // 绘制螺旋线2
      if (depth2 > -this.radius * 0.5) {
        const opacity2 = (depth2 + this.radius) / (this.radius * 2)
        ctx.strokeStyle = `rgba(${this.colors.strand2.r}, ${this.colors.strand2.g}, ${this.colors.strand2.b}, ${opacity2})`
        ctx.lineWidth = 3
        ctx.lineCap = 'round'
        ctx.shadowBlur = 10
        ctx.shadowColor = `rgba(${this.colors.strand2.r}, ${this.colors.strand2.g}, ${this.colors.strand2.b}, ${opacity2 * 0.5})`
        
        ctx.beginPath()
        ctx.moveTo(x2, y)
        ctx.lineTo(nextX2, nextY)
        ctx.stroke()
      }

      // 绘制节点球体
      if (depth1 > -this.radius * 0.3) {
        const opacity1 = (depth1 + this.radius) / (this.radius * 2)
        const size = 5 + opacity1 * 3
        
        const gradient1 = ctx.createRadialGradient(x1, y, 0, x1, y, size)
        gradient1.addColorStop(0, `rgba(${this.colors.strand1.r}, ${this.colors.strand1.g}, ${this.colors.strand1.b}, ${opacity1})`)
        gradient1.addColorStop(1, `rgba(${this.colors.strand1.r}, ${this.colors.strand1.g}, ${this.colors.strand1.b}, 0)`)
        
        ctx.shadowBlur = 15
        ctx.shadowColor = `rgba(${this.colors.strand1.r}, ${this.colors.strand1.g}, ${this.colors.strand1.b}, ${opacity1})`
        ctx.fillStyle = gradient1
        ctx.beginPath()
        ctx.arc(x1, y, size, 0, Math.PI * 2)
        ctx.fill()
      }

      if (depth2 > -this.radius * 0.3) {
        const opacity2 = (depth2 + this.radius) / (this.radius * 2)
        const size = 5 + opacity2 * 3
        
        const gradient2 = ctx.createRadialGradient(x2, y, 0, x2, y, size)
        gradient2.addColorStop(0, `rgba(${this.colors.strand2.r}, ${this.colors.strand2.g}, ${this.colors.strand2.b}, ${opacity2})`)
        gradient2.addColorStop(1, `rgba(${this.colors.strand2.r}, ${this.colors.strand2.g}, ${this.colors.strand2.b}, 0)`)
        
        ctx.shadowBlur = 15
        ctx.shadowColor = `rgba(${this.colors.strand2.r}, ${this.colors.strand2.g}, ${this.colors.strand2.b}, ${opacity2})`
        ctx.fillStyle = gradient2
        ctx.beginPath()
        ctx.arc(x2, y, size, 0, Math.PI * 2)
        ctx.fill()
      }
    }

    ctx.restore()
  }
}

let helixes = []

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  ctx = canvas.getContext('2d')

  // 创建多个DNA螺旋
  helixes = []
  const helixCount = Math.min(3, Math.floor(canvas.width / 250))
  for (let i = 0; i < helixCount; i++) {
    helixes.push(new DNAHelix(canvas, i, helixCount))
  }

  animate()
}

const animate = () => {
  if (!ctx || !canvasRef.value) return

  // 创建深色科技背景
  const gradient = ctx.createRadialGradient(
    canvasRef.value.width / 2,
    canvasRef.value.height / 2,
    0,
    canvasRef.value.width / 2,
    canvasRef.value.height / 2,
    Math.max(canvasRef.value.width, canvasRef.value.height) / 2
  )
  gradient.addColorStop(0, '#0a1520')
  gradient.addColorStop(0.5, '#051015')
  gradient.addColorStop(1, '#000508')
  
  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)

  // 绘制网格背景
  ctx.strokeStyle = 'rgba(100, 200, 255, 0.05)'
  ctx.lineWidth = 1
  const gridSize = 50
  for (let x = 0; x < canvasRef.value.width; x += gridSize) {
    ctx.beginPath()
    ctx.moveTo(x, 0)
    ctx.lineTo(x, canvasRef.value.height)
    ctx.stroke()
  }
  for (let y = 0; y < canvasRef.value.height; y += gridSize) {
    ctx.beginPath()
    ctx.moveTo(0, y)
    ctx.lineTo(canvasRef.value.width, y)
    ctx.stroke()
  }

  // 更新和绘制DNA螺旋
  helixes.forEach(helix => {
    helix.update()
    helix.draw(ctx)
  })

  animationFrame = requestAnimationFrame(animate)
}

const handleResize = () => {
  if (!canvasRef.value) return
  canvasRef.value.width = window.innerWidth
  canvasRef.value.height = window.innerHeight
  
  // 重新创建螺旋以适应新尺寸
  helixes = []
  const helixCount = Math.min(3, Math.floor(canvasRef.value.width / 250))
  for (let i = 0; i < helixCount; i++) {
    helixes.push(new DNAHelix(canvasRef.value, i, helixCount))
  }
}

onMounted(() => {
  init()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.dna-helix-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

